// packageA/pages/stepChartPerson/stepChartPerson.js
const app = getApp();
import CommonService from '../../../utils/service/commonService.js';
import Toast from '../../../miniprogram_npm/@vant/weapp/toast/toast';
import * as echarts from '../../../ec-canvas/echarts';
const util = require('../../../utils/util');
//图表对象
let Chart=null;

Page({

  /**
   * 页面的初始数据
   */
  data: {
    //传参
    paramObj:{},
    //日历范围，默认最近7天
    dateRange: [],
    //显示日历
    showDate: false,
    //最小值为一个月前
    minDate: util.countPrevDay(new Date(),31),
    //最大值为今天
    maxDate: new Date().getTime(),
    //开始日期
    startTime: null,
    //结束日期
    endTime: null,

    //图表
    ec: {
      //延迟加载
      lazyLoad: true
    },
    //是否显示图表（避免遮挡）
    showChart:true,
    //无数据
    showNoData:true,
    //图表配置
    chartSet:{
      //颜色
      barColor:'#666',
      //轴上标题
      ytitle:'活跃度',
      xtitle: '日期',
    },
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    if(options.paramObj){
      let paramObj=JSON.parse(options.paramObj);

      console.log('个人活跃度传参');
      console.log(paramObj);

      this.setData({
        paramObj: paramObj,
        startTime: paramObj.beginDate,
        endTime: paramObj.endDate,
      })

      //获取个人步数数据
      this.getData();
    } 
  },

  //获取个人步数数据
  getData(){
    Toast.loading({
      duration: 0,
      forbidClick: true,
      message: '加载中...'
    });

    //图表组件
    this.echartsComponnet = this.selectComponent('#mychart');

    this.setData({
      showNoData: false,
      showChart: true
    })

    let param={
      beginDate: this.data.startTime,
      endDate: this.data.endTime,
      imei: this.data.paramObj.imei
    }

    CommonService.stepStatisticsDay(param).then(res=>{
      if(res.data.data && res.data.data.result && res.data.data.result.length){
        let result=res.data.data.result;
        console.log('个人步数');
        console.log(result);
         
        //图表数据
        let xData=[];
        let yData=[];
        
        for(let i=0;i<result.length;i++){
          xData.push(result[i].day);
          //数据设成对象格式，点击时可获取用到的字段
          yData.push(result[i].value);
        }
        
        //图表格式
        let chartData={
          xData:xData,
          yData:[{
              type: 'bar',
              data: yData,
              barWidth : '15px',
              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    position: 'right',
                    color: "#80242d"
                  },
                  color: new echarts.graphic.LinearGradient(
                    1, 0, 0, 0,
                    [{
                      offset: 0,
                      color: '#0385DC'
                    },{
                      offset: 1,
                      color: '#1f4e79'
                    }]
                  )
                }
              }
          }]
        }

        console.log('图表数据');
        console.log(chartData);  

        //判断图表是否第一次绘制
        this.isHaveChart(Chart,this.echartsComponnet,this.data.chartSet,chartData); 
        
        Toast.clear();

      }else{
        this.setData({
          showNoData: true,
          showChart: false
        })
        Toast.clear();
      }  
    }).catch((error) => {
      this.setData({
        showNoData: true,
        showChart: false
      })
      Toast.clear();
    })
  },

  //显示日历
  onShowDate() {
    this.setData({ 
      showDate: true 
    })
    this.hideChart();
  },

  //隐藏日历
  onCloseDate() {
    this.setData({ 
      showDate: false 
    })
    this.showChart();
  },

  //确认日期
  onConfirmDate(event) {
    const [start,end] = event.detail;
    this.setData({
      showDate: false,
      startTime: util.timeFormatDay(start),
      endTime: util.timeFormatDay(end)
    })
    this.getData();
  },

  //判断图表是否第一次绘制
  isHaveChart(chartObj,componnetObj,setObj,dataObj){
    if (!chartObj){
      //如果是第一次绘制，则初始化图表
      this.init_echarts(chartObj,componnetObj,setObj,dataObj);
    }else{
      //更新图表数据
      this.setOption(chartObj,setObj,dataObj);
    }
  },

  //初始化图表
  init_echarts: function (chartObj,componnetObj,setObj,dataObj) {
    componnetObj.init((canvas, width, height) => {
      chartObj = echarts.init(canvas, null, {
        width: width,
        height: height
      });

      this.setOption(chartObj,setObj,dataObj);

      return chartObj;
    });
  },

  //更新图表数据
  setOption: function (chartObj,setObj,dataObj) {
    //清除
    chartObj.clear();
    //设置新数据
    chartObj.setOption(this.getOption(chartObj,setObj,dataObj));
  },

  //指定图表的配置项和数据
  getOption: function (chartObj,setObj,dataObj) {
    //文字颜色
    let fontColor='#666';

    let option = {
      legend: {
        textStyle: {
          color: '#666',
          padding: [0, 30, 0, 0]
        },
        x: 'right',
        y: 'top'
      },
      grid: {
        left: '5%',
        right: '18%',
        top: '10%',
        bottom: '5%',
        containLabel: true,
      },
      xAxis: {
        type: 'value',
        name: setObj.ytitle,
        axisLabel: {
          color: fontColor,
          fontSize: 14,
          interval: 0,
          rotate: '-20'
        },
        axisLine: {
          lineStyle: {
            color: setObj.barColor
          }
        },
        splitLine: {
          lineStyle: {
            color: '#eee'
          }
        }
      },
      yAxis: {
        type: 'category',
        name: setObj.xtitle,
        axisLabel: {
          color: fontColor,
          interval: 0,
          fontSize: 13,
        },
        axisLine: {
          lineStyle: {
            color: setObj.barColor
          }
        },
        axisTick:{
          //轴线与数据字段对齐
	        alignWithLabel: true
	      },
        data: dataObj.xData
      },
      series:dataObj.yData
    };

    let _this=this;

    //首先移除事件，不然会造成多次点击
    chartObj.off('click');
    
    //点击柱状图
    chartObj.on('click', function (params) {
      console.log(params);
      let objs={
        date: params.name,
        imei: _this.data.paramObj.imei,
        nickName: _this.data.paramObj.nickName
      }

      //跳转人员图表
      wx.navigateTo({
        url: "/packageA/pages/stepChart/stepChart?paramObj="+JSON.stringify(objs)
      })
    })

    return option;
  },

  //隐藏图表
  hideChart(){
    this.setData({
      showChart:false
		})
  },

  //显示图表
  showChart(){
    this.setData({
      showChart:true
		})
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})